<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page contentType="text/html; charset=UTF-8" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<html>
	<head>
		<title>Card Vault</title>
		<link href="<c:url value="/resources/css/normalize.css" />" rel="stylesheet" type="text/css" media="screen"/>
		<link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet"type="text/css" media="screen"/>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css" media="screen"/>
		<link href="<c:url value="/resources/css/selectbox.css"/>" rel="stylesheet" type="text/css" media="screen"/>
		<script src="<c:url value="/resources/js/jquery-1.8.3.min.js" />"></script>
		<script src="<c:url value="/resources/js/bootstrap.min.js" />"></script>
		<script src="<c:url value="/resources/js/scripts.js" />"></script>
		<script src="<c:url value="/resources/js/jquery.selectbox.min.js" />"></script>
		<script type="text/javascript">
			var context = '${pageContext.request.contextPath}';
			$(function() {
				$('select').selectbox();
			});
		</script>
	</head>
    <body>
        <div id="wrapper">
        	<div class="heading">Card Vault</div>
        	<form class="form-horizontal" method="post" action="success" onsubmit="return checkBilling()">
	        	<div class="confirmationText">
		        	<p>You're about to register your cards for the Card Vault service. Please note that an amount of 
		        		Rxxx (amount is<br>automatically calculated based on the cards that user has selected) will be 
		        		debit to the account that you enter<br>below every month</p> 
					<p class="muted">Once you have filled in your details a statement will be mailed to you immediately.</p>
	        	</div>
	        	
				<div class="billingMethod">
					<div class="controls">
						<select>
							<option selected="selected" disabled="disabled">Billing method</option>
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</div>
				</div>
				
				<div class="confirmLeftColumn" id="LeftColumn">
					<p align="center">Monthly by Debit Order</p> 
		        	<div class="control-group">
						<div class="controls confirmLeftInput">
							<input type="text" name="input" id="inputAccNumber" placeholder="Acc Number: ">
						</div>
				    </div>
				    <div class="control-group">
						<div class="controls confirmLeftInput">
						    <input type="text" name="input" id="inputAccHolder" placeholder="Acc Holder: ">
						</div>
				    </div>
				    <div class="control-group">
					    <div class="controls confirmLeftInput">
							<input type="text" name="input" id="inputAccType" placeholder="Acc Type: ">
						</div>
				    </div>
				    <div class="control-group">
					    <div class="controls confirmLeftInput">
							<select id="inputBank">
								<option selected="selected" disabled="disabled">Bank</option>
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
							</select>
					    </div>
				    </div>
				    <div class="control-group">
					    <div class="controls confirmLeftInput">
							<input type="text" name="input" id="inputBranchName" placeholder="Branch Name: ">
					    </div>
				    </div>
				    <div class="control-group">
					    <div class="controls confirmLeftInput">
							<input type="text" name="input" id="inputBranchCode" placeholder="Branch Code: ">
						</div>
				    </div>
				    <div class="control-group">
				    	<div class="confirmLeftInput">
						    <input type="checkbox" name="agree" id="agree1"> I agree to terms and conditions
					    </div>
				    </div>
				</div>
				
				<div class="confirmRightColumn" id="RightColumn">
		        	<p align="center">Annual</p>
		        	<p align="center">Card Vault Details</p>
		        	<p align="center">Bank Details</p>
		        	<!-- <div class="control-group">
						<div class="controls confirmRightInput">
							<input type="text" name="input" id="inputName" placeholder="Name: ">
						</div>
					</div> -->
					<div class="control-group">
						<div class="controls confirmRightInput">
							<label class="checkbox">
						    	<input type="checkbox" name="agree" id="agree2"> I agree to terms and conditions
						    </label>
						</div>
					</div>
				</div>
        		<div class="clear"></div>
        		
        		<div class="control-group" align="center">
			      	<button type="submit" class="btn">Done</button>
			  	</div>
			</form>
			<div class="fixed_block"> 
			 	<div id="fixed">
					<div class="mainview" align="center">
						<jsp:include page="service/fixed_block.jsp"></jsp:include>
					</div>
				</div> 
		  	</div>
        </div>
    </body>
</html>